<template>
  <el-dialog v-model="dialogShow" title="设置上级" width="900px" :append-to-body="true" :destroy-on-close="true" :close-on-click-modal="false" @close="closeDialog">
    <div style="display: flex;margin-bottom: 20px">
      <div style="margin-right: 20px"><el-text type="info">会员：</el-text>{{data.memberName}}</div>
      <div style="margin-right: 10px"><el-text type="info">ID：</el-text>{{data.id}}</div>
      <div><el-text type="info">微信昵称：</el-text>{{data.nickName}}</div>
    </div>
    <div class="task-one">
      <div class="task-one__item">
<!--        <span class="task-one__label">微信昵称：</span>-->
        <el-input placeholder="请输入微信昵称" v-model="searchParams.nickName" @keyup.enter.native="handleSearch" clearable></el-input>
      </div>
      <div class="task-one__item">
<!--        <span class="task-one__label">会员名：</span>-->
        <el-input placeholder="请输入会员名" v-model="searchParams.memberName" @keyup.enter.native="handleSearch" clearable></el-input>
      </div>
      <div class="task-one__item">
<!--        <span class="task-one__label">手机号：</span>-->
        <el-input placeholder="请输入手机号" v-model="searchParams.memberPhone" @keyup.enter.native="handleSearch" clearable></el-input>
      </div>
      <div class="task-one__btn ">
        <el-button type="primary" :loading="searchBtnLoading" :icon="Search"
                   @click="handleSearch">搜索</el-button>
      </div>
    </div>

    <el-table class="table-mb" v-loading="loading" :data="list" :header-cell-style="{ background: '#F5F7FA' }"
              element-loading-background="rgba(255, 255, 255, 0.6)"  row-key="sid" height="500">
      <el-table-column prop="headimgUrl" label="头像" min-width="66" max-width="66" width="66">
        <template #default="{ row }">
          <el-avatar :size="50" :src="row.headimgUrl" style="display: block"/>
        </template>
      </el-table-column>
      <el-table-column prop="memberName" label="会员">
        <template #default="{ row }">
          <div style="display: flex;align-items: center">
            <span>{{row.memberName}}</span>
            <el-icon v-if="row.sex === 0">
              <Male color="#409eff"/>
            </el-icon>
            <el-icon v-if="row.sex === 1">
              <Female color="#f89898"/>
            </el-icon>
          </div>
<!--          <div><el-text type="info">ID：</el-text>{{row.id}}</div>-->
          <div><el-text type="info">微信昵称：</el-text>{{row.nickName}}</div>
        </template>
      </el-table-column>
<!--      <el-table-column prop="memberType" label="基础信息">-->
<!--        <template #default="{ row }">-->
<!--          <div>-->
<!--            <el-text type="info">类型：</el-text>-->
<!--            <el-text type="warning" v-if="row.memberType === 2">分销商</el-text>-->
<!--            <el-text type="primary" v-if="row.memberType === 1">用户</el-text>-->
<!--          </div>-->
<!--          <div><el-text type="info">等级：</el-text>{{row.gradeName}}</div>-->
<!--          <div><el-text type="info">分组：</el-text>{{row.groupName}}</div>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column prop="payMoney" label="统计">
        <template #default="{ row }">
          <div><el-text type="info">消费总额：</el-text>￥{{row.payMoney}}</div>
          <div><el-text type="info">消费次数：</el-text>{{row.payNum}}</div>
<!--          <div><el-text type="info">最近消费时间：</el-text>{{row.payDate}}</div>-->
        </template>
      </el-table-column>

      <el-table-column align="center" prop="status" label="状态"  width="100">
        <template #default="{ row }">
          <el-text v-if="row.status === 0" type="success">正常</el-text>
          <el-text v-else-if="row.status === 1" type="info">停用</el-text>
          <el-text v-else type="info"></el-text>
        </template>
      </el-table-column>
      <el-table-column prop="created" label="创建时间" width="160"> </el-table-column>
      <el-table-column label="操作" width="100" fixed="right">
        <template #default="{ row }">
          <el-button link type="success" @click="setParent(row)">设为上级</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        v-model:current-page="page"
        v-model:page-size="pageSize"
        :page-sizes="pageSizeNum"
        :total="totalNums"
        layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
  </el-dialog>
</template>

<script setup>
import {
  getCurrentInstance,
  ref,
  reactive,
  onMounted,
  watch, computed
} from "vue"
import listMixins from "@mixins/hook/list"
import {Search} from "@element-plus/icons-vue";

const {
  proxy
} = getCurrentInstance()

/**
 * minxin列表加载
 */
const {
  page,
  pageSizeNum,
  pageSize,
  loading,
  totalNums,
  searchParams,
  searchBtnLoading,
  apiPath,
  list,
  handleSearch,
  getData
} = listMixins()

apiPath.value = 'member/getDistributorList'

const emits = defineEmits(["close"])


const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  data:{
    type: Object,
    default: {},
  }
});

const dialogShow = ref(false);
watch(()=>props.show,(nVal)=>{
  dialogShow.value = nVal;
  if(nVal){
    page.value = 1;
    getData()
  }
})
const closeDialog = () =>{
  emits("close")
}

const setParent = (row) =>{
  let sid = props.data.sid;
  let parentId = row.sid;
  let url = `/member/setParent/${sid}/${parentId}`;
  let data = JSON.parse(JSON.stringify(props.data));
  delete data.sid;
  loading.value = true;
  proxy.$axios.put(url,data)
      .then((res) => {
        loading.value = false;
        if (res.data.code == 200) {
          proxy.$message({
            message: "操作成功",
            type: "success"
          })
          closeDialog(1);
        } else {
          proxy.$message({
            message: res.data.msg,
            type: "error"
          })
        }
      })
      .catch((err) => {
        loading.value = false;
      })
}

onMounted(() => {


})
</script>

<style lang="less">



</style>